<template>
  <div class="page-header-index-wide">
    <a-spin :spinning="loading || loadingParty">
      <a-card
        :bordered="false"
        :bodyStyle="{ padding: '16px 0', height: '100%' }"
        :style="{ minHeight: `${layoutContentHeight - pageHeaderHeight - 24}px` }"
      >
        <div class="account-settings-info-main">
          <div class="account-settings-info-left">
            <div class="avatar-wrap">
              <a-avatar class="avatar" :size="150" :src="avatarUrl | imgURLFilter">
                <a-spin tip="上传中" :spinning="uploading">
                  <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
                </a-spin>
              </a-avatar>
              <a-upload
                name="file"
                :show-upload-list="false"
                accept="image/jpeg,image/png"
                :customRequest="customRequest"
                :before-upload="beforeUpload"
                @change="handleChange"
              >
                <a-button icon="upload">{{ $t('authenticationCenter.org.changeAvatar') }}</a-button>
                <div class="uploadInfo">支持jpg/png格式图片，大小不能超过500KB，建议图片尺寸为128px*128px</div>
              </a-upload>
            </div>
          </div>
          <div class="account-settings-info-right">
            <div class="account-settings-info-view">
              <a-form-model
                style="min-width:600px"
                ref="form"
                :model="form"
                :label-col="{ span: 4 }"
                :wrapper-col="{ span: 12 }"
              >
                <a-form-model-item
                  :label="$t('authenticationCenter.org.personName')"
                  prop="name"
                  :rules="[
                    {
                      required: true,
                      message: $t('common.emptyErr', { name: $t('authenticationCenter.org.personName').toLowerCase() }),
                      whitespace: true,
                      trigger: 'change'
                    }
                  ]"
                >
                  <s-input :limit="64" :spell-check="false" autocomplete="off" v-model.trim="form.name" />
                </a-form-model-item>
                <a-form-model-item prop="gender" :label="$t('authenticationCenter.org.gender')">
                  <a-radio-group name="gender" v-model="form.gender">
                    <a-radio :value="1">{{ $t('authenticationCenter.org.male') }}</a-radio>
                    <a-radio :value="0">{{ $t('authenticationCenter.org.female') }}</a-radio>
                  </a-radio-group>
                </a-form-model-item>
                <a-form-model-item
                  :label="$t('authenticationCenter.org.username')"
                  :rules="[
                    {
                      validator: validator.usernameValidator,
                      trigger: 'change'
                    },
                    {
                      required: true,
                      message: $t('common.emptyErr', { name: $t('authenticationCenter.org.username').toLowerCase() }),
                      whitespace: true,
                      trigger: 'change'
                    }
                  ]"
                  prop="username"
                >
                  <s-input :limit="64" v-model.trim="form.username" />
                </a-form-model-item>
                <a-form-model-item
                  v-if="isNew"
                  :rules="[
                    {
                      required: true,
                      message: $t('common.emptyErr', { name: $t('common.password').toLowerCase() }),
                      trigger: 'change'
                    },
                    { validator: validateToNextPassword, trigger: 'change' }
                  ]"
                  prop="password"
                >
                  <span slot="label">
                    {{ $t('common.password') }}
                    <a-tooltip :title="passwordTips">
                      <a-icon type="question-circle-o" />
                    </a-tooltip>
                  </span>
                  <a-input-password v-model.trim="form.password">
                    <a slot="addonAfter" @click="handleRandom">
                      {{ $t('authenticationCenter.org.randomGeneration') }}
                    </a>
                  </a-input-password>
                </a-form-model-item>
                <a-form-model-item v-else :label="$t('common.password')">
                  <a-button type="link" @click="handleResetPwd">{{ $t('button.resetPw') }}</a-button>
                </a-form-model-item>
                <a-divider />

                <a-form-model-item
                  :label="$t('authenticationCenter.org.dept')"
                  prop="orgTreeList"
                  :rules="[
                    {
                      required: true,
                      message: $t('common.emptyErr', {
                        name: $t('authenticationCenter.org.dept').toLowerCase()
                      }),
                      trigger: 'change'
                    }
                  ]"
                >
                  <a-tag
                    class="orgItem"
                    v-for="(i, index) in form.orgTreeList"
                    :key="i.id"
                    :closable="Number(i.id) !== Number(form.orgId)"
                    @close="deleteOrgItem(i.id, index)"
                  >
                    <span v-if="Number(i.id) === Number(form.orgId)" class="mainOrg">{{ $t('common.main') }}</span>
                    {{ i.name }}
                  </a-tag>
                  <a-button
                    @click="
                      orgPickerMode = 'org';
                      orgPickerVisible = true;
                    "
                    type="link"
                  >
                    {{ $t('common.edit') }}
                  </a-button>
                </a-form-model-item>
                <a-form-model-item :label="$t('authenticationCenter.org.position')" prop="position">
                  <s-input v-model.trim="form.position" :limit="128" :spell-check="false" autocomplete="off" />
                </a-form-model-item>
                <a-form-model-item
                  :label="$t('authenticationCenter.org.identity')"
                  prop="identityType"
                  :rules="[
                    {
                      required: true,
                      message: $t('common.emptyErr', {
                        name: $t('authenticationCenter.org.identity').toLowerCase()
                      }),
                      trigger: 'change'
                    }
                  ]"
                >
                  <a-radio-group name="identityType" v-model="form.identityType">
                    <a-radio value="NORMAL">{{ $t('authenticationCenter.org.normal') }}</a-radio>
                    <a-radio value="HIGHER">{{ $t('authenticationCenter.org.higher') }}</a-radio>
                  </a-radio-group>
                </a-form-model-item>
                <a-form-model-item
                  v-if="form.identityType === 'HIGHER'"
                  :label="$t('authenticationCenter.org.manageOrg')"
                  prop="manageOrg"
                  :rules="[
                    {
                      required: true,
                      message: $t('common.emptyErr', {
                        name: $t('authenticationCenter.org.manageOrg').toLowerCase()
                      }),
                      trigger: 'change'
                    }
                  ]"
                >
                  <a-select v-model="form.manageOrg" mode="multiple" option-label-prop="label">
                    <a-select-option
                      class="action-item"
                      v-for="item in form.orgTreeList"
                      :key="item.id"
                      :value="item.id"
                      :label="item.name"
                    >
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
                <a-form-model-item :label="$t('authenticationCenter.org.higherUp')" prop="higherId">
                  <a-tag closable class="orgItem" v-if="form.higherId" @close="deleteHigher">
                    {{ higherObj.label }}
                  </a-tag>
                  <a-button @click="openHigherSelectModal" type="link">
                    {{ $t('common.edit') }}
                  </a-button>
                </a-form-model-item>
                <a-divider />
                <a-form-model-item
                  prop="jobNumber"
                  :label="$t('authenticationCenter.org.jobNumber')"
                  :rules="[
                    {
                      validator: validator.jobNumberValidator,
                      trigger: 'change'
                    }
                  ]"
                >
                  <s-input :limit="32" :spell-check="false" autocomplete="off" v-model.trim="form.jobNumber" />
                </a-form-model-item>
                <a-form-model-item :label="$t('authenticationCenter.org.englishName')" prop="englishName">
                  <s-input :limit="32" v-model.trim="form.englishName" />
                </a-form-model-item>
                <a-form-model-item
                  :label="$t('authenticationCenter.org.mobile')"
                  prop="mobile"
                  :rules="[
                    {
                      validator: validator.mobileValidator,
                      trigger: 'change'
                    },
                    { validator: mobileValidator, trigger: 'change' },
                    { pattern: isTel, message: '请输入 11 位手机号！', trigger: 'change' }
                  ]"
                >
                  <a-input :spell-check="false" :maxLength="11" autocomplete="off" v-model.trim="form.mobile">
                    <a-select slot="addonBefore" style="width: 70px" v-model="form.phoneRegion">
                      <a-select-option value="86">
                        +86
                      </a-select-option>
                    </a-select>
                  </a-input>
                </a-form-model-item>
                <a-form-model-item :label="$t('authenticationCenter.org.phoneNumber')" prop="telephone">
                  <s-input :limit="32" v-model.trim="form.telephone" />
                </a-form-model-item>
                <a-form-model-item
                  :label="$t('authenticationCenter.org.email')"
                  prop="email"
                  :rules="[
                    {
                      validator: validator.emailValidator,
                      trigger: 'change'
                    },
                    { validator: emailValidator, trigger: 'change' },
                    {
                      type: 'email',
                      message: '请输入正确的邮箱地址',
                      trigger: 'change'
                    }
                  ]"
                >
                  <s-input :limit="128" :spell-check="false" autocomplete="off" v-model.trim="form.email" />
                </a-form-model-item>
                <a-divider />
                <a-form-model-item
                  :label="$t('authenticationCenter.org.hidNo')"
                  prop="hidNo"
                  :rules="[{ validator: validator.hidNoValidator }]"
                >
                  <s-textarea :limit="500" v-model.trim="form.hidNo" />
                </a-form-model-item>
                <a-form-model-item class="footer">
                  <a-button style="margin-right: 8px;" @click="handleBack">{{ $t('common.cancel') }}</a-button>
                  <a-button v-action:save type="primary" @click="handleSubmit" :loading="confirmLoading">{{
                    $t('common.save')
                  }}</a-button>
                </a-form-model-item>
              </a-form-model>
            </div>
          </div>
        </div>
      </a-card>
    </a-spin>

    <!-- 人员、部门选择 -->
    <org-picker
      ref="orgPicker"
      :visible="orgPickerVisible"
      :title="orgPickerMode === 'org' ? '选择部门' : '选择上级'"
      :mode="orgPickerMode === 'org' ? ['party'] : ['member']"
      :mainOrgId="Number(form.orgId)"
      :defaultSelectedKeys="form.orgIds"
      @ok="handlePickerUserOk"
      @close="orgPickerVisible = false"
    />
    <select-modal
      ref="selectModalHigher"
      :title="'选择上级'"
      :subTitle="$t('authenticationCenter.userGroup.orgnization')"
      :tree-data="managerOrgTree"
      :inputNumber="false"
      :select-tree-node="loadMemberUserData"
      :multiple="false"
      @sure="handleAddHigher"
    ></select-modal>
    <ResetPassword ref="resetPassword" />
  </div>
</template>

<script>
import { readAllOrg, createUser, updateUser, readUser, userUnique } from '@/api/authenticationCenter/structure'
import { PageView } from '@/layouts'
import { SInput, STextarea, OrgPicker } from '@/components'
import SelectModal from '@/components/SelectModal/SelectModal'
import { mixinDevice, layoutMixin, asyncValidateMixin } from '@/utils/mixin'
import { uploadFile } from '@/api/common'
import { breadFirstTree, setArrayToTree, randomString } from '@/utils/util'
import { UserPickerOptions } from '@/components/UserPicker/options'
import { isTel } from '@/utils/regExp'
import cloneDeep from 'lodash.clonedeep'
import { getAppOrg, getAppOrgMember } from '@/api/authenticationCenter/config/userGroup'
import { getSystemSecurity } from '@/api/authenticationCenter/SystemSecurityController'
import md5 from 'md5'
import ResetPassword from './modules/ResetPassword.vue'
export default {
  name: 'StructureUser',
  components: {
    PageView,
    SInput,
    STextarea,
    OrgPicker,
    SelectModal,
    ResetPassword
  },
  mixins: [mixinDevice, layoutMixin, asyncValidateMixin],
  data () {
    return {
      isTel,
      userId: null,
      user: {},
      uploading: false,
      avatarUrl: '',
      isNew: true,
      form: {
        name: '',
        gender: 1,
        avatar: null,
        jobNumber: '',
        email: '',
        position: '',
        telephone: '',
        hidNo: '',
        phoneRegion: '86',
        orgId: null,
        identityType: null,
        manageOrg: [],
        englishName: null,
        mobile: null,
        orgIds: [],
        orgTreeList: [],
        higherId: null,
        username: null,
        password: '111111'
      },
      passwordInfo: {
        passwordMin: 6,
        passwordMax: 12,
        passwordRule: 'SIMPLE'
      },
      higherObj: {},
      loadingParty: false,
      partyList: [],
      confirmLoading: false,
      loading: false,
      // 可见应用
      appList: [],
      // 从其它路由跳转过来还是直接打开
      routerCanBack: false,
      orgPickerVisible: false,
      defaultSelectedKeys: [],
      orgPickerMode: 'org',
      managerOrgTree: [],
      passwordRule: {
        SIMPLE: this.$t('authenticationCenter.securityConfiguration.numbersAndeLetters'),
        COMPLEX: this.$t('authenticationCenter.securityConfiguration.numbersOrLettersOrcharacter')
      }
    }
  },
  computed: {
    passwordTips () {
      const str = `${this.$t('modules.user.passwordLength')}${this.passwordInfo.passwordMin}-${
        this.passwordInfo.passwordMax
      },${this.passwordRule[this.passwordInfo.passwordRule]}`
      return str + ';' + this.$t('authenticationCenter.securityConfiguration.initPsw')
    },
    treeData () {
      const partyList = this.partyList
      partyList.forEach(party => {
        party.scopedSlots = { title: 'title' }
        party.value = party.id
      })

      // 组织机构部门树状结构
      const tree = setArrayToTree({
        ...UserPickerOptions,
        data: partyList,
        collection: 'children'
      })

      return tree
    },
    // 部门全路径
    orgMatched () {
      if (!this.user || !this.user.orgIds) return []

      const orgMaps = []
      this.user.orgIds.forEach(id => {
        const tree = []
        let party = this.partyList.find(item => item.id === id)
        while (party) {
          tree.unshift(party)
          party = this.partyList.find(item => item.id === party[UserPickerOptions.pid])
        }
        orgMaps.unshift(tree)
      })

      const orgNames = orgMaps.map(list => list.map(org => org.name).join('/'))
      return orgNames
    }
  },
  created () {
    this.getSystemSecurity()
    this.$_asyncValidateMixin_init([
      {
        fieldName: 'jobNumber',
        caller: userUnique,
        extraParams: this.getExtraParams
      },
      {
        fieldName: 'username',
        caller: userUnique,
        extraParams: this.getExtraParams
      },
      {
        fieldName: 'email',
        caller: userUnique,
        extraParams: this.getExtraParams
      },
      {
        fieldName: 'mobile',
        caller: userUnique,
        extraParams: this.getExtraParams
      },
      {
        fieldName: 'hidNo',
        caller: userUnique,
        extraParams: this.getExtraParams
      }
    ])
    this.getAllParty()
    const { id } = this.$route.params
    const { orgId, orgName } = this.$route.query
    if (id) {
      this.getUserInfo()
      this.isNew = false
    } else if (orgId && orgName) {
      this.isNew = true
      // 新建人员带上的部门
      this.$nextTick(() => {
        this.$set(this.form, 'orgIds', [Number(orgId)])
        this.$set(this.form, 'orgId', Number(orgId))
        this.$set(this.form, 'orgTreeList', [
          {
            id: Number(orgId),
            name: orgName
          }
        ])
      })
    }
  },
  methods: {
    // 获取安全配置
    getSystemSecurity () {
      getSystemSecurity().then(res => {
        if (res.data) {
          this.passwordInfo = res.data
        }
      })
    },
    // 密码校验
    validateToNextPassword (rules, value, callback) {
      if (value && value !== '111111') {
        const str = `${this.$t('modules.user.passwordLength')}${this.passwordInfo.passwordMin}-${
          this.passwordInfo.passwordMax
        },${this.passwordRule[this.passwordInfo.passwordRule]}`
        if (this.passwordInfo.passwordRule === 'COMPLEX') {
          if (value.length >= this.passwordInfo.passwordMin && value.length <= this.passwordInfo.passwordMax) {
            if (
              /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{6,}$/.test(
                value
              )
            ) {
              callback()
            } else {
              callback(str)
            }
          } else {
            callback(str)
          }
        } else if (this.passwordInfo.passwordRule === 'SIMPLE') {
          if (
            value.length >= this.passwordInfo.passwordMin &&
            value.length <= this.passwordInfo.passwordMax &&
            /[\d]/.test(value) &&
            /[a-zA-z]/.test(value)
          ) {
            callback()
          } else {
            callback(str)
          }
        }
      } else {
        callback()
      }
    },
    // 随机生成密码
    handleRandom () {
      this.form.password = randomString(this.passwordInfo.passwordMin, this.passwordInfo.passwordRule)
      this.$refs.form.validateField('password')
    },
    handleResetPwd () {
      this.$refs.resetPassword.open(this.userId, this.passwordInfo)
    },
    // 邮箱手机号校验
    emailValidator (rule, value, callback) {
      const { mobile, email } = this.form
      if (!mobile && !email) {
        callback(new Error('手机号、邮箱必填其一'))
      } else {
        if (!mobile) {
          this.$refs.form.validateField('mobile')
        }
        callback()
      }
    },
    mobileValidator (rule, value, callback) {
      const { mobile, email } = this.form
      if (!mobile && !email) {
        callback(new Error('手机号、邮箱必填其一'))
      } else {
        if (!email) {
          this.$refs.form.validateField('email')
        }
        callback()
      }
    },

    // 编辑页获取用户信息
    async getUserInfo () {
      const { id } = this.$route.params
      const { type, orgId } = this.$route.query
      this.userId = id
      this.loading = true

      const res = await readUser({ id })
      this.loading = false
      if (res.code === 'sso.ok') {
        const {
          id,
          avatar,
          jobNumber,
          name,
          gender,
          email,
          telephone,
          phoneRegion,
          orgIds,
          orgId,
          orgTreeList,
          hidNo,
          position,
          identityType,
          manageOrg,
          higherId,
          higherName,
          mobile,
          englishName,
          username
        } = res.data
        this.avatarUrl = avatar
        this.form = {
          id,
          orgIds,
          orgId,
          orgTreeList,
          email: email || undefined,
          hidNo: hidNo || undefined,
          position: position || undefined,
          jobNumber,
          name,
          gender,
          telephone,
          mobile,
          phoneRegion,
          identityType,
          manageOrg: manageOrg || undefined,
          higherId: higherId || undefined,
          englishName,
          username: username || jobNumber,
          avatar
        }
        this.higherObj = {
          label: higherName || '',
          value: higherId || ''
        }
        const regExp = new RegExp('(?<=\\[).*?(?=\\])', 'g')
        if (manageOrg) {
          this.$set(
            this.form,
            'manageOrg',
            manageOrg.match(regExp).map(i => Number(i))
          )
        }
        this.user = { ...res.data }
      }
    },
    // 获取所有部门
    async getAllParty () {
      this.loadingParty = true
      const res = await readAllOrg()
      if (res.code === 'sso.ok') {
        this.partyList = res.data || []
        const { orgId } = this.$route.query
        const { id } = this.$route.params
        if (!id && orgId) {
          // 新建人员带上的部门
          this.form.orgIds = [Number(orgId)]
          this.form.orgId = orgId
        }
      }
      this.loadingParty = false
    },
    beforeUpload (file) {
      const isLtSize = file.size / 1024 < 500
      if (!isLtSize) {
        this.$message.error('图片大小不能超过 500KB!')
      }
      return isLtSize
    },
    handleChange (info) {
      const { status } = info.file
      if (status === 'uploading') {
        this.uploading = true
      } else if (status === 'done') {
        this.uploading = false
        const { response } = info.file
        this.avatarUrl = response.data
      } else if (status === 'error') {
        this.uploading = false
      }
    },
    // 上传文件
    async customRequest ({ file, filename, onSuccess, onError }) {
      const formData = new FormData()
      formData.append(filename, file)
      const res = await uploadFile(formData)
      if (res.code === 'sso.ok') {
        onSuccess(res)
      } else {
        onError()
      }
    },
    // 删除部门
    deleteOrgItem (id, index) {
      this.form.orgTreeList.splice(index, 1)
      // 删除部门ids数组对应值，删除负责部门对应值
      if (this.form.orgIds) {
        this.form.orgIds = this.form.orgIds.filter(i => i != id)
      }
      if (this.form.manageOrg) {
        this.form.manageOrg = this.form.manageOrg.filter(i => i != id)
      }
    },
    // 选择组织
    handlePickerUserOk (selectNodes) {
      const { partyList, mainOrgId } = selectNodes
      const orgTreeList = partyList.map(p => ({
        id: Number(p.id),
        name: p.name
      }))
      const orgIds = partyList.map(p => Number(p.id))
      this.$set(this.form, 'orgIds', orgIds)
      this.$set(this.form, 'orgId', Number(mainOrgId))
      this.$set(this.form, 'orgTreeList', orgTreeList)
      this.$refs.form.validateField('orgTreeList', () => {})

      // 如果存在负责部门，比对已选择部门差异
      if (this.form.manageOrg) {
        this.form.manageOrg = this.form.manageOrg.filter(i => orgIds.includes(Number(i)))
      }
      this.$refs.orgPicker.resetModal()
    },

    // 打开直属上级选择弹窗
    openHigherSelectModal () {
      this.$refs.selectModalHigher.open()
      getAppOrg().then(res => {
        const list = res.data
        const tree = setArrayToTree({
          data: list,
          pid: 'parentId'
        })
        breadFirstTree(
          tree,
          node => {
            node.scopedSlots = {
              title: 'title'
            }
            node.title = node.name
            node.key = node.id
            return true
          },
          'children'
        )
        this.managerOrgTree = tree
      })
    },
    // get人员
    loadMemberUserData (node, resolve) {
      getAppOrgMember({
        pageNo: 1,
        pageSize: 9999,
        id: node.id,
        status: 1
      }).then(res => {
        const data = this.unique(res.data.data, 'id')
        data.forEach(item => {
          item.label = item.name
          item.value = item.id
        })
        resolve(data)
      })
    },

    /**
     * 根据数组对象的某个字段去重
     * item.name  是[{name:1}] 根据每条数据的name值来去重
     * */
    unique (arr, val) {
      const res = new Map()
      return arr.filter(item => !res.has(item[val]) && res.set(item[val], 1))
    },

    // 保存直属上级
    handleAddHigher (data) {
      this.$refs.selectModalHigher.close()
      if (data.length) {
        this.higherObj = cloneDeep(data[0])
        this.$set(this.form, 'higherId', Number(this.higherObj.value))
      }
    },

    // 删除直属上级
    deleteHigher () {
      this.$set(this.form, 'higherId', undefined)
      this.higherObj = {}
    },
    // 保存
    handleSubmit () {
      this.confirmLoading = true
      // 远程校验通过的字段不参与最终校验
      // 最终校验通过后，values 不包含未参与最终校验的远程字段，需要主动获取所有字段值
      const data = {
        username: '',
        jobNumber: '',
        name: '',
        mobile: '',
        email: '',
        orgTreeList: '',
        identityType: '',
        hidNo: ''
      }
      if (this.form.identityType === 'HIGHER') {
        data.manageOrg = ''
      }
      if (!this.userId) {
        data.password = ''
      }
      const fieldNames = this.$_asyncValidateMixin_fieldsFilter(data)
      const validatePromise = fieldNames.map(fieldName => {
        const p = new Promise((resolve, reject) => {
          this.$refs.form.validateField(fieldName, errorMessage => {
            if (!errorMessage) {
              resolve()
            } else {
              reject(errorMessage)
            }
          })
        })
        return p
      })
      Promise.all(validatePromise)
        .then(() => {
          let api = null
          const formData = cloneDeep(this.form)
          delete formData.orgTreeList
          formData.orgIdList = formData.orgIds
          if (formData.identityType === 'HIGHER') {
            formData.manageOrg = `[${formData.manageOrg.join('][')}]`
          } else {
            formData.manageOrg = null
          }
          if (this.userId) {
            formData.id = this.userId
          } else {
            formData.password = md5(formData.password)
          }
          // 头像
          if (this.avatarUrl) {
            formData.avatar = this.avatarUrl
          }
          if (formData.id) {
            api = updateUser
          } else {
            api = createUser
          }
          this.confirmLoading = false
          api(formData)
            .then(res => {
              this.handleBack()
              this.$message.success(res.message)
            })
            .finally(() => {
              this.confirmLoading = false
            })
        })
        .catch(() => {
          this.confirmLoading = false
        })
    },
    // 返回列表页面
    handleBack () {
      if (this.routerCanBack) {
        this.$router.back()
      } else {
        this.$router.push({ name: 'structureList' })
      }
    },
    // 表单校验额外参数
    getExtraParams () {
      return {
        id: this.userId
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    const fromRoute = from.name
    next(vm => {
      vm.routerCanBack = !!fromRoute
    })
  }
}
</script>

<style lang="less" scoped>
.account-settings-info-main {
  width: 100%;
  display: flex;
  height: 100%;
  overflow: auto;

  .account-settings-info-left {
    width: 224px;
    .avatar-wrap {
      text-align: center;
      .avatar {
        margin-bottom: 24px;
      }
    }
  }

  .account-settings-info-right {
    flex: 1 1;
    padding: 8px 40px;

    .account-settings-info-view {
      padding-top: 12px;
    }
  }
}
.uploadInfo {
  font-size: 12px;
  color: rgb(153, 153, 153);
  line-height: 1.5;
  margin-top: 10px;
}
.orgItem {
  margin-right: 10px;
  .mainOrg {
    color: #1890ff;
    font-weight: 700;
    &::after {
      content: '';
      margin: 0 6px 0 8px;
      display: inline-block;
      width: 1px;
      height: 10px;
      background: #ccc;
      position: relative;
      top: 1px;
    }
  }
}
.footer {
  text-align: right;
}
</style>
